<template>
	<view>
		<!-- 每个部分 就用一个view  div -->
		<!-- 搜索部分 -->
		<div class="search">
			<div class="search-content">
				<image src="../../static/logo.png" mode="widthFix"></image>
				<!-- 搜索框 -->
				<view class="search-box">
					<div class="scan">
						<van-icon size="20px" name="scan" />
						
					</div>
					<div class="search-icon">
						<van-icon size="20px" name="search" />
					</div>
				</view>
			</div>
		</div>
		<!-- 轮播图部分 -->
		<div>
			<swiper :autoplay="true">
				<swiper-item>
					<image mode="widthFix" src="../../static/banner1.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="../../static/banner2.png"></image>
				</swiper-item>
				<swiper-item>
					<image mode="widthFix" src="../../static/banner3	.png"></image>
				</swiper-item>
			</swiper>
		</div>
		<!-- 快捷通道 -->
		<div class="menu-box">
			<!-- 原来的图片 -->
			<!-- <div class="img">
				
			</div> -->
			<image  class="img" mode="widthFix" src="../../static/p.png"></image>
			<div class="menu">
				<div>
					<image mode="widthFix" src="../../static/a.png"></image>
					<view class="text">全部</view>
				</div>
				<div>
					<image mode="widthFix" src="../../static/b.png"></image>
					<view class="text">会员</view>
				</div>
				<div>
					<image mode="widthFix" src="../../static/c.png"></image>
					<view class="text">积分</view>
				</div>
				<div>
					<image mode="widthFix" src="../../static/d.png"></image>
					<view class="text">优惠券</view>
				</div>
			</div>
			<button class="buy-btn">立即抢购</button>
			<div class="goods-title">
				<view class="goods-title-content">黎卡夫·胶原蛋白透明质酸钠口服液（蓝莓味）50ML*7支/盒</view>
				<view class="goods-title-price">
					￥<text>398</text>.00
					<van-icon name="cart-o" class="shopping" size="16px" />
				</view>
			</div>
		</div>
		<!-- 礼包专区 -->
		<view class="libao">
			<view class="libao-title">
				—— 礼包专区 ——
			</view>
			<view>
				<view class="goods-box">
					<view class="goods-item mt10" v-for="item in list" :key="item.id" @click="toDetail(item.id)">
						<image mode="widthFix" :src="item.img"></image>
						<view class="libao-goods-title">{{item.title}}</view>
						<view class="goods-libao-item-bottom">
							<view class="b-l">￥{{item.price}}</view>
							<view class="b-r">仅剩:{{item.surplus}}盒</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<!-- 各种图片 -->
		<!-- mode="widthFix"   设置图片的宽度时，其高度跟随宽度 自适应修改 -->
		
		<!-- 让图片居中的方式  将图片放在view标签中 给view标签设置样式  text-align:center; -->
		<view class="center-img">
			<image src="../../static/11.png" ></image>
			<!-- 123 -->
			<!-- <van-image width="100" height="100" src="../../static/11.png" /> -->
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				list: []
			}
		},
		// 请求数据
		onLoad() {
			uni.request({
				url: "http://localhost:3000/list",
				method:"GET",
				success: (data) => {
					this.list = data.data
				}
			})
		},
		methods: {
			toDetail (id) {
				// console.log(id)
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			}
		}
	}
</script>
<style>
	/* .center-img image{
		width: 100px;
		height: 100px;
		border-radius: 50%;
	} */
	.center-img{
		text-align: center;
		margin-top: 10px;
	}
	.mt10{
		margin-top: 10px;
	}
	.b-l{
		font-size: 13px;
		color: #ed2121;
	}
	.b-r{
		font-size: 12px;
		color: #999;
	}
	.goods-libao-item-bottom{
		display: flex;
		margin: 7px;
		justify-content: space-between; /*两端对齐*/
	}
	.libao-goods-title{
		font-size: 13px;
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		margin: 5px 7px;
	}
	.goods-box{
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}
	.goods-item{
		width: 46%;
		border-radius: 15px;
		/* height: 100px; */
		/* border: 1px solid red; */
		box-shadow: 0px 2px 5px #eee;
		overflow: hidden; /*超出父级  隐藏*/
	}
	.goods-item image{
		width: 100%;
	}
	.libao-title{
		margin-top: 20px;
		margin-bottom: 25px;
		text-align: center;
		
		font-size: 18px;
	}
	.shopping{
		margin-left: 10px;
	}
	.goods-title-content{
		font-size: 12px;
		color: #fff;
		padding-top: 30px;
		margin-left: 10px;
	}
	.goods-title-price{
		color: #fff;
		font-size: 12px;
		margin-left: 10px;
		margin-top: 5px;
	}
	.goods-title-price text{
		font-size: 16px;
	}
	.buy-btn{
		position: absolute;
		bottom: 90px; /*底部距离*/
		width: 120px; /*宽度*/
		height: 30px; /*高度*/
		line-height: 30px;  /*内部的文字垂直居中30px*/
		background: #fff;  /*背景颜色*/
		border-radius: 50px;  /*圆角*/
		font-size: 14px; /*字体大小*/
		left: 50%;  /*距离左侧间距*/
		box-shadow: -2px 3px 2px #333; /*阴影   x偏移值  y偏移量  模糊半径  阴影颜色 */
		font-weight: 600;  /*加粗*/
		margin-left: -60px; /*水平居中*/
	}
	.goods-title{
		height: 100px;
		background: #ff6c00;
		margin-top: -4px;
	}
	.menu-box{
		position: relative;
	}
	.menu{
		position: absolute;
		width: 300px;
		height: 100px;
		/* background: #fff; */
		top: 10px;
		left: 50%;
		margin-left: -150px;
		display: flex;
		justify-content: space-evenly;
	}
	.menu image{
		width: 70px;
	}
	.menu .text{
		text-align: center; /*文本对齐方式*/
		color: #fff;
		position: relative;
		top: -8px;
		font-size: 12px;
	}
	.img{
		width: 100%;
		/* height: 300px; */
		/* background: rgb(255,255,202); */
	}
	/* 小程序中 swiper的默认高度是 150px */
	swiper{
		height: 550px;
	}
	swiper image{
		width: 100%;
	}
	.search{
		background: #ff6c00; /*背景颜色*/
		height: 130rpx; /*高度*/
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.search-content{
		display: flex;
		width: 250px;
		height: 30px;
		margin-bottom: 10px;  /*距离下方的间距*/
		margin-left: 10px;  /*距离左侧的间距*/
	}
	.search-content image{
		width: 32px;
	}
	.search-box{
		display: flex;
		justify-content: space-between; /*主轴上两端对齐*/
		background: #fff;
		width: 200px;
		border-radius: 50px;  /*设置圆角*/
		margin-left: 10px;
		height: 30px;
		line-height: 35px; /*使内部的文字 或者图片 垂直居中30px*/
	}
	.search-icon {
		margin-right: 15px;
	}
	.scan{
		margin-left: 15px;
	}
	.scan:after{
		content: '';
		display: inline-block;
		width: 1px;
		height: 20px;
		background: #ccc;
		margin-left: 10px;
		/* margin-top: 15px; */
		position: relative;
		top: 2px;
	}
</style>
